<template>
  <view
    v-if="show"
    class="tn-row-notice-class tn-row-notice"
    :class="[backgroundColorClass]"
    :style="[noticeStyle]"
  >
    <view class="tn-row-notice__wrap">
      <!-- 左图标 -->
      <view class="tn-row-notice__icon">
        <view
          v-if="leftIcon"
          class="tn-row-notice__icon--left"
          :class="[`tn-icon-${leftIconName}`, fontColorClass]"
          :style="[fontStyle('leftIcon')]"
          @tap="clickLeftIcon"
        ></view>
      </view>

      <!-- 消息体 -->
      <view class="tn-row-notice__content-box" id="tn-row-notice__content-box">
        <view
          class="tn-row-notice__content"
          id="tn-row-notice__content"
          :style="{
            animationDuration: animationDuration,
            animationPlayState: animationPlayState,
          }"
        >
          <text
            class="tn-row-notice__content--text"
            :class="[fontColorClass]"
            :style="[fontStyle()]"
            @tap="click"
            >{{ showText }}</text
          >
        </view>
      </view>

      <!-- 右图标 -->
      <view class="tn-row-notice__icon">
        <view
          v-if="rightIcon"
          class="tn-row-notice__icon--right"
          :class="[`tn-icon-${rightIconName}`, fontColorClass]"
          :style="[fontStyle('rightIcon')]"
          @tap="clickRightIcon"
        ></view>
        <view
          v-if="closeBtn"
          class="tn-row-notice__icon--right"
          :class="[`tn-icon-close`, fontColorClass]"
          :style="[fontStyle('close')]"
          @tap="close"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import componentsColorMixin from '../../libs/mixin/components_color.js';
export default {
  name: 'tn-row-notice',
  mixins: [componentsColorMixin],
  props: {
    // 显示的内容
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    // 是否显示
    show: {
      type: Boolean,
      default: true,
    },
    // 播放状态
    // play -> 播放 paused -> 暂停
    playStatus: {
      type: String,
      default: 'play',
    },
    // 是否显示左边图标
    leftIcon: {
      type: Boolean,
      default: true,
    },
    // 左边图标的名称
    leftIconName: {
      type: String,
      default: 'sound',
    },
    // 左边图标的大小
    leftIconSize: {
      type: Number,
      default: 34,
    },
    // 是否显示右边的图标
    rightIcon: {
      type: Boolean,
      default: false,
    },
    // 右边图标的名称
    rightIconName: {
      type: String,
      default: 'right',
    },
    // 右边图标的大小
    rightIconSize: {
      type: Number,
      default: 26,
    },
    // 是否显示关闭按钮
    closeBtn: {
      type: Boolean,
      default: false,
    },
    // 圆角
    radius: {
      type: Number,
      default: 0,
    },
    // 内边距
    padding: {
      type: String,
      default: '18rpx 24rpx',
    },
    // 自动播放
    autoplay: {
      type: Boolean,
      default: true,
    },
    // 水平滚动时的速度，即每秒滚动多少rpx
    speed: {
      type: Number,
      default: 160,
    },
  },
  computed: {
    fontStyle() {
      return (type) => {
        let style = {};
        style.color = this.fontColorStyle ? this.fontColorStyle : '';
        style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '';
        if (type === 'leftIcon' && this.leftIconSize) {
          style.fontSize = this.leftIconSize + 'rpx';
        }
        if (type === 'rightIcon' && this.rightIconSize) {
          style.fontSize = this.rightIconSize + 'rpx';
        }
        if (type === 'close') {
          style.fontSize = '24rpx';
        }

        return style;
      };
    },
    noticeStyle() {
      let style = {};
      style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent';
      if (this.padding) style.padding = this.padding;
      return style;
    },
  },
  data() {
    return {
      // 滚动文字的宽度
      textWidth: 0,
      // 存放滚动文字的盒子的宽度
      textBoxWidth: 0,
      // 动画执行的时间
      animationDuration: '10s',
      // 动画执行状态
      animationPlayState: 'paused',
      // 当前显示的文本
      showText: '',
    };
  },
  watch: {
    list: {
      handler(value) {
        this.showText = value.join('，');
        this.$nextTick(() => {
          this.initNotice();
        });
      },
      immediate: true,
    },
    playStatus(value) {
      if (value === 'play') this.animationPlayState = 'running';
      else this.animationPlayState = 'paused';
    },
    speed(value) {
      this.initNotice();
    },
  },
  methods: {
    // 初始化通知栏
    initNotice() {
      let query = [],
        textBoxWidth = 0,
        textWidth = 0;
      let textQuery = new Promise((resolve, reject) => {
        uni
          .createSelectorQuery()
          .in(this)
          .select(`#tn-row-notice__content`)
          .boundingClientRect()
          .exec((ret) => {
            this.textWidth = ret[0].width;
            resolve();
          });
      });
      query.push(textQuery);

      Promise.all(query).then(() => {
        // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#tn-row-notice__content-box的宽度，因为设置了.tn-row-notice__content样式中设置了padding-left: 100%
        this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
        // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
        this.animationPlayState = 'paused';
        setTimeout(() => {
          if (this.autoplay && this.playStatus === 'play') this.animationPlayState = 'running';
        }, 10);
      });
    },
    // 点击了通知栏
    click() {
      this.$emit('click');
    },
    // 点击了关闭按钮
    close() {
      this.$emit('close');
    },
    // 点击了左边图标
    clickLeftIcon() {
      this.$emit('clickLeft');
    },
    // 点击了右边图标
    clickRightIcon() {
      this.$emit('clickRight');
    },
  },
};
</script>

<style lang="scss" scoped>
.tn-row-notice {
  width: 100%;
  overflow: hidden;

  &__wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  &__content {
    &-box {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      margin-left: 12rpx;
    }

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: right;
    // 为了能滚动起来
    padding-left: 100%;
    animation: tn-notice-loop-animation 10s linear infinite both;

    &--text {
      word-break: keep-all;
      white-space: nowrap;
    }
  }

  &__icon {
    &--left {
      display: inline-flex;
      align-items: center;
    }

    &--right {
      margin-left: 12rpx;
      display: inline-flex;
      align-items: center;
    }
  }
}

@keyframes tn-notice-loop-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
